<template>
	<view>
		<view class="bg"></view>
		<head-navbar :back="true" :bgColor="'none'">
			<view >
				<text style="color: #FFFFFF;">活动规则</text>
			</view>
		</head-navbar>
		<view class="content">
			<view class="rulerBox">
				<view class="title">
					<image src="../../static/img/ruler_clock.png"></image>
					<view class="text">活动时间：</view>
				</view>
				<view class="list"><rich-text :nodes="ruler2"></rich-text></view>
			</view>
			<view class="rulerBox">
				<view class="title">
					<image src="../../static/img/ruler_read.png"></image>
					<view class="text">拼团攻略：</view>
				</view>
				<view class="list"><rich-text :nodes="ruler3"></rich-text></view>
			</view>
			<view class="rulerBox">
				<view class="title">
					<image src="../../static/img/ruler_wenhao.png"></image>
					<view class="text">开团说明：</view>
				</view>
				<view class="list"><rich-text :nodes="ruler4"></rich-text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api  from '../../api/group/index' 
	export default{
		data() {
			return {
				ruler2: "",
				ruler3: "",
				ruler4: ""
			}
		},
		onLoad() {
			this.getExplainById(2)
			this.getExplainById(3)
			this.getExplainById(4)
		},
		methods:{
			getExplainById(id){
				api.getExplainById({request:{id:id}}).then(res=>{
					if(id == 2){
						this.ruler2 = res.data.dataBody.content
					}else if(id == 3){
						this.ruler3 = res.data.dataBody.content
					}else if(id == 4){
						this.ruler4 = res.data.dataBody.content
					}
				}).catch(err=>{
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rulerBox{
		background: #fee3da;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 40rpx;
	}
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../../static/img/ruler_bg.png);
		background-size: cover;
		z-index: 0;
	}
	.content{
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 99;
		.list{
			padding-bottom: 10rpx;
			font-size: 28rpx;
		}
		.title{
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			line-height: 30rpx;
			image{
				width: 49rpx;
				height: 49rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>
